<template>
  <a-form
    @submit="handleSubmit"
    :model="form"
    class="form"
    ref="responsitoryForm"
    :rules="rules"
    :labelCol="formItemLayout.labelCol"
    :wrapperCol="formItemLayout.wrapperCol"
  >
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="仓库名" name="name">
          <a-input
            placeholder="请输入仓库名称"
            v-model:value="form.name"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="8" :md="12" :sm="24">
        <a-form-item
          label="仓库域名"
          name="url"
        >
          <a-input
            addonBefore="http://"
            addonAfter=".com"
            placeholder="请输入"
            v-model:value="form.url"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 9, offset: 1}" :lg="10" :md="24" :sm="24">
        <a-form-item name="owner" label="仓库管理员">
          <a-select placeholder="请选择管理员" v-model:value="form.owner" style="width: 100%">
            <a-select-option value="王同学">王同学</a-select-option>
            <a-select-option value="李同学">李同学</a-select-option>
            <a-select-option value="黄同学">黄同学</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item name="approver" label="审批人">
          <a-select placeholder="请选择审批员" v-model:value="form.approver">
            <a-select-option value="王晓丽">王晓丽</a-select-option>
            <a-select-option value="李军">李军</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="8" :md="12" :sm="24">
        <a-form-item label="生效日期" name="dateRange">
          <a-range-picker style="width: 100%" v-model:value="form.dateRange" />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 9, offset: 1}" :lg="10" :md="24" :sm="24">
        <a-form-item label="仓库类型" name="type">
          <a-select placeholder="请选择仓库类型" v-model:value="form.type" >
            <a-select-option value="公开">公开</a-select-option>
            <a-select-option value="私密">私密</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit" >Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import {Form, Button, Input, DatePicker, Select, Row, Col} from 'ant-design-vue';
  const FormItem = Form.Item;
  const { Option } = Select;
  const {RangePicker} = DatePicker;
  
  export default {
    name: 'RepositoryForm',
    components: {
      ARow: Row,
      ACol: Col,
      AForm: Form,
      AButton: Button,
      AInput: Input,
      ARangePicker: RangePicker,
      AFormItem: FormItem,
      ASelect: Select,
      ASelectOption: Option,
    },
    props: {
      showSubmit: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        form: {
          name: '',
          url: '',
          owner: '',
          approver: '',
          dateRange: null,
          type: '',
        },
        formItemLayout: {
          labelCol: { span: 8 },
          wrapperCol: { span: 16 }
        },
        rules: {
          name: [{ required: true, message: '请输入仓库名称', whitespace: true}],
          url: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: this.validate}],
          owner: [{ required: true, message: '请选择管理员'}],
          approver: [{ required: true, message: '请选择审批员'}],
          dateRange: [{ required: true, message: '请选择生效日期'}],
          type: [{ required: true, message: '请选择仓库类型'}]
        }
      }
    },
    methods: {
      handleSubmit (e) {
        e.preventDefault();
        this.$refs.responsitoryForm.validateFields().then(() => {
          this.$notification['error']({
            message: 'Received values of form:',
            description: this.form
          })
        })
      },
      validate (rule, value, callback) {
        const regex = /^user-(.*)$/;
        if (!regex.test(value)) {
          callback(new Error('需要以 user- 开头'))
        }
        callback()
      }
    }
  }
</script>

<style scoped>

</style>
